<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" (click)="gotohome()">
          <ion-icon name="arrow-back"></ion-icon>
      </ion-buttons>
    <ion-title>grid</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-grid>
        <ion-row>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="6">
            <div>ion-col [size="6"]</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="3">
            <div>ion-col [size="3"]</div>
          </ion-col>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col size="3">
            <div>ion-col [size="3"]</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="3">
            <div>ion-col [size="3"]</div>
          </ion-col>
          <ion-col size="3" offset="3">
            <div>ion-col [size="3"] [offset="3"]</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col>
            <div>ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#
            <br>#</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col align-self-start>
            <div>ion-col [start]</div>
          </ion-col>
          <ion-col align-self-center>
            <div>ion-col [center]</div>
          </ion-col>
          <ion-col align-self-end>
            <div>ion-col [end]</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#</div>
          </ion-col>
        </ion-row>
      
        <ion-row align-items-start>
          <ion-col>
            <div>[start] ion-col</div>
          </ion-col>
          <ion-col>
            <div>[start] ion-col</div>
          </ion-col>
          <ion-col align-self-end>
            <div>[start] ion-col [end]</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#</div>
          </ion-col>
        </ion-row>
      
        <ion-row align-items-center>
          <ion-col>
            <div>[center] ion-col</div>
          </ion-col>
          <ion-col>
            <div>[center] ion-col</div>
          </ion-col>
          <ion-col>
            <div>[center] ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#</div>
          </ion-col>
        </ion-row>
      
        <ion-row align-items-end>
          <ion-col>
            <div>[end] ion-col</div>
          </ion-col>
          <ion-col align-self-start>
            <div>[end] ion-col [start]</div>
          </ion-col>
          <ion-col>
            <div>[end] ion-col</div>
          </ion-col>
          <ion-col>
            <div>ion-col
            <br>#
            <br>#</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="12" size-sm>
            <div>ion-col [size="12"] [size-sm]</div>
          </ion-col>
          <ion-col size="12" size-sm>
            <div>ion-col [size="12"] [size-sm]</div>
          </ion-col>
          <ion-col size="12" size-sm>
            <div>ion-col [size="12"] [size-sm]</div>
          </ion-col>
          <ion-col size="12" size-sm>
            <div>ion-col [size="12"] [size-sm]</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="12" size-md>
            <div>ion-col [size="12"] [size-md]</div>
          </ion-col>
          <ion-col size="12" size-md>
            <div>ion-col [size="12"] [size-md]</div>
          </ion-col>
          <ion-col size="12" size-md>
            <div>ion-col [size="12"] [size-md]</div>
          </ion-col>
          <ion-col size="12" size-md>
            <div>ion-col [size="12"] [size-md]</div>
          </ion-col>
        </ion-row>
      
        <ion-row>
          <ion-col size="6" size-lg offset="3">
            <div>ion-col [size="6"] [size-lg] [offset="3"]</div>
          </ion-col>
          <ion-col size="3" size-lg>
            <div>ion-col [size="3"] [size-lg]</div>
          </ion-col>
        </ion-row>
      </ion-grid>
</ion-content>
